
<template>
  <el-cascader :value="propsValue" :show-all-levels="true" @change="regionChange" :props="regionCascaderProps" clearable
    :placeholder="$tt('tip_please_select_region')" v-loading="loading"></el-cascader>
</template>

<script>

export default {
  name: 'region_home_select',
  props: {

    province: {
      type: String,
      default: null,
    },
    city: {
      type: String,
      default: null,
    },
    county: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      regionCascaderProps: {
        lazy: true, emitPath: true,
        lazyLoad: this.regionSearchSelect
      },
    }
  },
  computed: {
    propsValue() {
      let out = []
      if (this.province) out.push(this.province)
      if (this.city) out.push(this.city)
      if (this.county) out.push(this.county)
      return out

    },
  },
  methods: {

    regionChange(e) {
      this.$emit('input', e)
      this.$emit('change', e)
      this.$emit('update:province', e.length > 0 ? e[0] : null)
      this.$emit('update:city', e.length > 1 ? e[1] : null)
      this.$emit('update:county', e.length > 2 ? e[2] : null)

    },
    regionSearchSelect(node, resolve) {

      const { level } = node;
      let data = {}
      if (level == 0) {
        // this.loading = true
      } else if (level == 1) {
        data = { provinceName: node.data.value }
      } else if (level == 2) {
        data = { cityName: node.data.value, provinceName: node.parent.data.value }
      } else if (level == 3) {
        // data = {countyName:node.data.value,cityName:node.parent.data.value,provinceName:node.parent.parent.data.value}
      }
      this.$ajax({
        url: "/oms-api/client/OmsCountryClientRpc/selectAllRegionLable.json",
        method: 'post',
        data,
        tip: false,
        success(res) {
          if (res.data && res.data.rows) {

            resolve(res.data.rows.map(it => { return { label: it, value: it, leaf: level >= 2 } }));
          }
        },
        complete: () => {
          this.loading = false
        }
      })
    },
  },
}
</script>
